<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />
<fmt:setLocale value="zh_CN" />

<div class="modal-dialog demo2do-modal-dialog" style="width:900px;">

  <div class="modal-content">

    <div class="modal-header beast-breadcrumb no-bottom-border clearfix">

      <h2><i class="glyphicon glyphicon-fire" title=""></i>&nbsp;&nbsp;<span>开通地域</span></h2>

      <button type="button" class="close" data-dismiss="modal">&times;</button>

    </div>

    <form class="form-horizontal" action="${ctx.host}/geos/activate" method="POST" data-validate="true">

    	<input type="hidden" name="codes">

      <div class="modal-body">
       
        <div class="form-group demo2do-form-group">
          <label class="col-xs-2 control-label">填写地域</label>
          <div class="pull-left col-xs-3">
            <input class="form-control" name="name" type="text" placeholder="可进行模糊查询" />
            <p class="error text-danger top-margin-10 hide">请填写地域</p>
          </div>
          
          <label class="col-xs-2 control-label">是否热门</label>
          <div class="pull-left col-xs-3">
            <select class="form-control" name="hot">
              <option value="">全部</option>
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
          </div>
          
          
          <div class="col-xs-2">
            <button id="searchBtn" class="btn btn-block btn-success btn-shadow btn-shadow-success">搜索</button>
          </div>
          
              
        </div>
        
        <div class="form-group demo2do-form-group">
          <div class="beast-breadcrumb-wrapper">
            <div class="beast-breadcrumb clearfix">
              <h2>地域列表</h2>
            </div>
            <table id="result-body" class="table table-striped table-hover demo2do-table bottom-margin-20">
	            <thead>
	              <tr>
	                <th></th>
	                <th>地域编号</th>
	                <th>地域名称</th>
	                <th>地域级别</th>
	                <th>热门城市</th>
	              </tr>
	            </thead>
	            <tbody>
	               <tr>
	                 <td colspan="5"><p>请搜索获取地域列表</p></td>
	               </tr>
	            </tbody>
	          </table>
	          
          </div>
        </div>

        <div class="form-group demo2do-form-group area-select hide">
        	<p class="text-danger text-center">请选择城市</p>
        </div>
        
      </div>

      <div class="modal-footer">
        <button type="submit" disabled class="btn btn-success btn-shadow btn-shadow-success demo2do-btn">确定添加</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-dismiss="modal">取消</button>
      </div>

    </form>

  </div>

</div>

<script src="${ctx.resource}/js/select2.min.js"></script>
<script src="${ctx.resource}/js/select2_locale_zh-CN.js"></script>
<script src="${ctx.resource}/js/bootstrap.validate.trigger.js"></script>
<script type="text/javascript">

  $(document).ready(function() {
	  
	  $('select[name="hot"]').select2({
        placeholder: '是否热门',
        minimumResultsForSearch: -1,
        allowClear: true
	  });
	  
	  $('form').shiftform({
	        beforeSubmit:function(el){
	        	debugger
	        	  var codes = $("table input:checkbox:checked").map(function(){
					      return $(this).val();
					    }).get();
					    if(codes.length > 0){
					    	$("input[name='codes']").val(codes);
					    	return true;	
					    }else {
					    	$(".area-select").removeClass('hide');
					    	setTimeout(function(){
					    		$(".area-select").addClass('hide');
					    	}, 2000)
					    	return false;
					    }
	        }
	  });

	  $('input[name="name"]').on("change", function(event){
	  	if($(this).val()){
	  		$(this).next().hasClass('hide') ? null : $(this).next().addClass('hide');
	  	}else {
	  		$(this).next().hasClass('hide') ? $(this).next().removeClass('hide') : null;
	  	}
	  });



	  $("#searchBtn").on("click", function(event){

			event.preventDefault();

			if( $('input[name="name"]').val() ) { 

				var searchUrl = "${ctx.host}/geos/search?filter=true&name=" + $('input[name="name"]').val();

		  	if( $('select[name="hot"]').val() ) {
		  		searchUrl = searchUrl + "&hot=" + $('select[name="hot"]').val()
		  	}

			  $.get(searchUrl, function(result) {
				  result = JSON.parse(result)
			  	if(result.code == '0' ) {
			  		$(".modal-content table tbody").empty();
			  		var geos = result.data.geos;
			  		if(geos.length > 0) {
			  			for(key in geos) {
				  			var hot = geos[key].hot == true ? "是":"否";
				  			var trHtml = "<tr>" +
			                  			"<td><input class='checkbox_check' type='checkbox' value='" + geos[key].code + "'/> </td>" + 
			                  			"<td>" + geos[key].code + "</td>"+
			                  			"<td>" + geos[key].name + "</td>" + 
			                  			"<td>" + geos[key].level + "</td>" + 
			                  			"<td>" + hot + "</td>" + 
			                				"</tr>";

		    				$(".modal-content table tbody").append(trHtml);	
		    				$("button[type='submit']").attr('disabled', false);
				  		}	
			  		}else {
			  			$(".modal-content table tbody").append("<tr><td colspan='5'><p>搜索结果为空。</p></td></tr>");
			  		}
			  		
			  	}else {
			  		// TODO add search error info here
			  	};
			  });

			}else {
				$('input[name="name"]').next().removeClass('hide');
			}

	  })
	  
  });

</script>
